import Vue from 'vue'
// 导入数据
import Vuex from 'vuex'
// 导入省市区数据
import areaList from '../utils/area'
// 导入token
import { getToken, removeToken } from '../utils/token'
// 获取用户数据的接口
import { getUserInfo } from '../api/my'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 用户信息
    userInfo: {},
    // 用来记录用户是否登陆的数据
    isLogin: false
  },
  mutations: {
    CHANGEUSERINFO (state, newUserInfo) {
      // 保存数据
      state.userInfo = newUserInfo
    },
    // 修改登录状态
    CHANGEISLOGIN (state, isLogin) {
      state.isLogin = isLogin
    },
    // 这里需要修改一部分的数据,在这里就是单独修改用户的昵称
    // 需要提交2个值去仓库 1个属性名 1个需要修改的值
    // 但是mutations中的方法只能传一个值,所以第二个参数就传一个对象
    // {
    //   // 需要修改的属性名
    //   propName:'xxx',
    //   // 修改的值
    //   propValue:'xxx'
    // }
    // 修改指定的属性, 这个写法一定要记得,这是一个很经典的案例
    // 直接传过来一个对象,里面有两个数据,每个数据的用处都不一样
    // 但同时都能起到效果
    CHANGEPROP (state, maps) {
      // { propName:'gender',propValue:1 }
      // 在这一步里面,属性的名字是动态的
      state.userInfo[maps.propName] = maps.propValue
    }
  },
  // vuex的计算属性
  getters: {
    // 头像
    avatarUrl (state) {
      return process.env.VUE_APP_URL + state.userInfo.avatar
    },
    // 性别
    genderText (state) {
      const map = {
        0: '未知',
        1: '靓仔',
        2: '靓妹'
      }
      // 返回的是map的某一个具体的属性值,这个属性名可以是0,1,2(根据后台返回)
      // 这个userinfo的值是state中的,这里只是取它的一个子属性值而已,这个写法一定要记住,很好用
      return map[state.userInfo.gender]
    },
    // 城市文本的转换
    areaText (state) {
      // 转换成文本 并返回
      // 这里的areaList就是导入的地区文件的js格式文件
      return areaList.city_list[state.userInfo.area]
    },
    // 是否有点赞  回头再看,现在不太明白
    // 这个是一个计算属性传参的问题,计算属性本质上是一个函数,可以传入一个参数
    // 直接传递一个参数给这个计算属性,这里传入了一个文章的id
    // 判断这个文章的id是否在用户资料的点赞文章id数组中存在,返回一个布尔值
    // Array.includes(x)方法返回一个布尔值，表示某个数组是否包含给定的值x
    isActive (state) {
      // 这个articleId从哪来的?这个isActive是一个函数,在引用它的页面有传参
      return function (articleId) {
        // 这个值是能获取到的
        // console.log(articleId)
        // 如果state.userInfo.starArticles这里面有数据,则判断
        if (state.userInfo.starArticles) {
          // 这两个值都能获取,但是就是无法同步显示
          // console.log(state.userInfo.starArticles)
          // 存在就是true 反之false
          return state.userInfo.starArticles.includes(articleId)
        }
        // 如果上面的判断没有进去,证明就没有数据,直接返回false
        return false
      }
    }
  },
  actions: {
    // 获取用户数据,因为使用了getToken getUserInfo removeToken
    // 这几个方法,那就把他们都导入进来
    // context 等同于store
    asyncGetUserInfo (context) {
      // 未登录状态下尝试获取用户数据
      if (context.state.isLogin === false) {
        // 有token采取获取
        if (getToken()) {
          // 获取用户数据
          getUserInfo().then(res => {
            // console.log(res)
            if (res.data.code === 200) {
              // 存起来
              context.commit('CHANGEISLOGIN', true)
              context.commit('CHANGEUSERINFO', res.data.data)
            } else {
              // token有问题
              removeToken()
            }
          })
        }
      }
    }
  },
  modules: {}
})
